<template>
  <scroll-view
    scroll-y="true"
    class="scroll"
    @scrolltolower="handleGetMoreData"
  >
    <EmptyBox v-if="!teamList.length" />
    <view class="teamList">
      <view class="left-list list">
        <TeamItem
          v-for="(item, index) in leftList"
          :key="index"
          :teamDetail="item"
        />
      </view>
      <view class="right-list list">
        <TeamItem
          v-for="(item, index) in rightList"
          :key="index"
          :teamDetail="item"
        />
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { mapState } from "vuex";
import TeamItem from "../../../components/team/TeamItem";
export default {
  name: "TeamList",
  components: {
    TeamItem,
  },
  data() {
    return {
      isMore: false,
      isEnd: false,
      currentPage: 0,
    };
  },
  beforeDestroy() {
    this.$store.commit("m_team/clearTeamList");
  },
  mounted() {
    this.getTeamListData();
  },
  computed: {
    ...mapState("m_team", ["teamList"]),
    rightList() {
      return this.teamList.filter((item, index) => (index + 1) % 2 === 0);
    },
    leftList() {
      return this.teamList.filter((item, index) => (index + 1) % 2 !== 0);
    },
  },
  methods: {
    // 获取队伍数据
    async getTeamListData(page = 0, limitCount = 6) {
      await this.$store.dispatch("m_team/getTeamList", { page, limitCount });
    },
    // 上拉获取更多
    async handleGetMoreData() {
      if (this.isEnd) {
        return;
      }
      if (this.isMore) {
        return;
      }
      uni.showLoading({
        title: "加载更多数据",
      });
      this.isMore = true;
      const page = ++this.currentPage,
        lastLength = this.teamList.length;
      await this.$store.dispatch("m_team/getTeamList", { page, limitCount: 5 });
      const currentLength = this.teamList.length;
      if (lastLength === currentLength) {
        this.isEnd = true;
        uni.showToast({
          icon: "error",
          title: "已展示全部队伍",
        });
      }
      this.isMore = false;
      uni.hideLoading();
      console.log("到达底部");
    },
  },
};
</script>

<style lang="scss" scoped>
.teamList {
  display: flex;
  justify-content: space-around;
  .list {
    width: 49vw;
  }
}
.scroll {
  height: calc(100vh - 100rpx);
}
</style>
